<template>
    <ContentWrap>
        <CardTitle title="Pagination 使用" />
        <code class="code-block mt-20px" >
            &lt;Pagination v-model:current-page="currentPage" :total="total" /&gt;<br/>
            &lt;Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" :pageSizes="[10, 20, 50, 100]" /&gt;<br/>
            &lt;Pagination v-model:current-page="currentPage" :total="total" :small="true" /&gt;
        </code>
        <CardTitle title="Pagination 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(1000)

const handlePageChange = (page: number) => {
    console.log('页面变化:', page)
}

const handleSizeChange = (size: number) => {
    console.log('每页条数变化:', size)
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Pagination 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>currentPage</td> 
                    <td>Number</td>
                    <td>1</td>
                    <td>当前页数</td>
                </tr>
                <tr>
                    <td>pageSize</td>
                    <td>Number</td>
                    <td>20</td>
                    <td>每页显示条目个数</td>
                </tr>
                <tr>
                    <td>total</td>
                    <td>Number</td>
                    <td>0</td>
                    <td>总条目数</td>
                </tr>
                <tr>
                    <td>pageSizes</td>
                    <td>Array</td>
                    <td>[10, 20, 50, 100]</td>
                    <td>每页显示个数选择器的选项设置</td>
                </tr>
                <tr>
                    <td>small</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否使用小型分页样式</td>
                </tr>
                <tr>
                    <td>layout</td>
                    <td>String</td>
                    <td>total, sizes, prev, pager, next, jumper</td>
                    <td>组件布局，子组件名用逗号分隔</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Pagination 事件" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>current-change</td> 
                    <td>currentPage: number</td>
                    <td>currentPage 改变时会触发</td>
                </tr>
                <tr>
                    <td>size-change</td>
                    <td>pageSize: number</td>
                    <td>pageSize 改变时会触发</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Pagination 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础分页</h4>
                <Pagination 
                    v-model:current-page="currentPage1" 
                    :total="total1" 
                    @current-change="handlePageChange1"
                />
                <p class="demo-result">当前页: {{ currentPage1 }}, 总数: {{ total1 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>完整功能</h4>
                <Pagination 
                    v-model:current-page="currentPage2" 
                    v-model:page-size="pageSize2"
                    :total="total2" 
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    @current-change="handlePageChange2"
                    @size-change="handleSizeChange2"
                />
                <p class="demo-result">当前页: {{ currentPage2 }}, 每页条数: {{ pageSize2 }}, 总数: {{ total2 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>小型分页</h4>
                <Pagination 
                    v-model:current-page="currentPage3" 
                    :total="total3" 
                    :small="true"
                    @current-change="handlePageChange3"
                />
                <p class="demo-result">当前页: {{ currentPage3 }}, 总数: {{ total3 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>简化版分页</h4>
                <Pagination 
                    v-model:current-page="currentPage4" 
                    :total="total4" 
                    layout="prev, pager, next"
                    @current-change="handlePageChange4"
                />
                <p class="demo-result">当前页: {{ currentPage4 }}, 总数: {{ total4 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>只有跳转功能</h4>
                <Pagination 
                    v-model:current-page="currentPage5" 
                    :total="total5" 
                    layout="total, prev, next, jumper"
                    @current-change="handlePageChange5"
                />
                <p class="demo-result">当前页: {{ currentPage5 }}, 总数: {{ total5 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>数据模拟</h4>
                <div class="data-controls">
                    <EButton @click="addData">增加数据</EButton>
                    <EButton @click="removeData">减少数据</EButton>
                    <EButton @click="resetData">重置数据</EButton>
                </div>
                <Pagination 
                    v-model:current-page="currentPage6" 
                    v-model:page-size="pageSize6"
                    :total="total6" 
                    :page-sizes="[5, 10, 20, 50]"
                    @current-change="handlePageChange6"
                    @size-change="handleSizeChange6"
                />
                <p class="demo-result">
                    当前页: {{ currentPage6 }}, 
                    每页条数: {{ pageSize6 }}, 
                    总数: {{ total6 }}, 
                    总页数: {{ Math.ceil(total6 / pageSize6) }}
                </p>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 示例1：基础分页
const currentPage1 = ref(1)
const total1 = ref(100)

// 示例2：完整功能
const currentPage2 = ref(1)
const pageSize2 = ref(20)
const total2 = ref(1000)

// 示例3：小型分页
const currentPage3 = ref(1)
const total3 = ref(50)

// 示例4：简化版分页
const currentPage4 = ref(1)
const total4 = ref(200)

// 示例5：只有跳转功能
const currentPage5 = ref(1)
const total5 = ref(500)

// 示例6：数据模拟
const currentPage6 = ref(1)
const pageSize6 = ref(10)
const total6 = ref(100)

const handlePageChange1 = (page: number) => {
    console.log('基础分页页面变化:', page)
}

const handlePageChange2 = (page: number) => {
    console.log('完整功能页面变化:', page)
}

const handleSizeChange2 = (size: number) => {
    console.log('每页条数变化:', size)
}

const handlePageChange3 = (page: number) => {
    console.log('小型分页页面变化:', page)
}

const handlePageChange4 = (page: number) => {
    console.log('简化版分页页面变化:', page)
}

const handlePageChange5 = (page: number) => {
    console.log('跳转功能页面变化:', page)
}

const handlePageChange6 = (page: number) => {
    console.log('数据模拟页面变化:', page)
}

const handleSizeChange6 = (size: number) => {
    console.log('数据模拟每页条数变化:', size)
}

const addData = () => {
    total6.value += 50
}

const removeData = () => {
    if (total6.value > 50) {
        total6.value -= 50
        // 如果当前页超出了总页数，回到最后一页
        const maxPage = Math.ceil(total6.value / pageSize6.value)
        if (currentPage6.value > maxPage) {
            currentPage6.value = maxPage
        }
    }
}

const resetData = () => {
    total6.value = 100
    currentPage6.value = 1
    pageSize6.value = 10
}
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-result {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
    }
}

.data-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
</style> 